<template>
	<view>
		<view class="query-flex">
			<u-cell-item title="审批人:" :arrow="false" class="list-title"><input class="list-text" type="text" :value="value" /></u-cell-item>
			<u-cell-item title="组织:" :arrow="false" class="list-title"><input class="list-text" type="text" :value="value" /></u-cell-item>
			<u-cell-item title="创建时间:" :arrow="false" class="list-title"><input class="list-text" type="text" :value="value" /></u-cell-item>
			<u-popup v-model="show" mode="bottom" length="80%">
				<u-time-line>
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">待取件</view>
								<view class="u-order-desc">[用户任务2]管理员(同意)</view>
								<view class="u-order-time">2021-05-08 12:12</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item>
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view>
								<view class="u-order-desc">【用户任务1】管理员(发起流程)</view>
								<view class="u-order-time">2021-05-06 22:30</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</u-popup>
			<!-- 按钮 -->
			<view class="button-con" @click="show = true">
				<view class="button-return"><view class="button">流程详情</view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			value: 11
		};
	}
};
</script>

<style lang="scss" scoped>
.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title {
	color: #333333;
	font-weight: bold;
	font-size: 32rpx;
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 28rpx;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}
.u-time-axis {
	padding-left: 40px;
	padding-top: 10px;
}
.content {
	padding: 24rpx;
	text-align: center;
}
</style>
